<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			.box {
				width: 60%;
				margin: 0 auto;
				overflow: hidden;
				position: relative;
				height: 388px;
			}
			
			img {
				width: 100%;
			}
			
			.content1 {
				position: absolute;
				width: 100%;
				height: 50%;
				top: 0;
				left: 0;
				animation: move 10s infinite;
				animation-delay: -1s;
			}
			
			.content2 {
				position: absolute;
				width: 100%;
				height: 50%;
				top: 0;
				left: 0;
				animation: move 10s infinite;
				animation-delay: 3s;
			}
			
			.content3 {
				position: absolute;
				width: 100%;
				height: 50%;
				top: 0;
				left: 0;
				animation: move 10s infinite;
				animation-delay: 7s;
			}
			
			.content4 {
				position: absolute;
				width: 100%;
				height: 50%;
				top: 0;
				left: 0;
				animation: move 10s infinite;
				animation-delay: 11s;
			}
			
			.content5 {
				position: absolute;
				width: 100%;
				height: 50%;
				top: 0;
				left: 0;
				background-size: 100%;
				animation: move 10s infinite;
				animation-delay: 15s;
			}
			
			@keyframes move {
				0% {
					position: absolute;
					left: 100%;
				}
				5% {
					position: absolute;
					left: 0;
				}
				20% {
					position: absolute;
					left: 0;
				}
				25% {
					position: absolute;
					left: -100%;
				}
				100% {
					position: absolute;
					left: -100%;
				}
			}
			
			ul,
			li {
				list-style: none;
			}
			
			.focus-container {
				position: absolute;
				bottom: 2%;
				z-index: 7;
				margin: 0 auto;
				left: 0;
				right: 0;
			}
			
			.focus-container ul {
				margin-left: 46%;
			}
			
			.focus-container li {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				float: left;
				margin-right: 10px;
				background: #fff;
			}
			
			.focus-item {
				width: 100%;
				height: 100%;
				background: #51B1D9;
				border-radius: inherit;
				animation-duration: 20s;
				animation-timing-function: linear;
				animation-name: fade;
				animation-iteration-count: infinite;
			}
			
			.focus-item1 {
				animation-delay: -1s;
			}
			
			.focus-item2 {
				animation-delay: 3s;
			}
			
			.focus-item3 {
				animation-delay: 7s;
			}
			
			.focus-item4 {
				animation-delay: 11s;
			}
			
			.focus-item5 {
				animation-delay: 15s;
			}
			
			.floatfix {
				*zoom: 1;
			}
			
			.focus-container {
				position: absolute;
				z-index: 7;
				margin: 0 auto;
				left: 0;
				right: 0;
			}
			
			.focus-container li {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				float: left;
				margin-right: 10px;
				background: #fff;
			}
			
			.focus-item {
				width: 100%;
				height: 100%;
				border-radius: inherit;
				animation-timing-function: linear;
				animation-name: fade;
				animation-iteration-count: infinite;
			}
			
			.focus-item2,
			.focus-item3,
			.focus-item4,
			.focus-item5 {
				opacity: 0;
			}
			
			.focus-container ul {
				margin-left: 40%;
			}
			@keyframes fade {

	0% {

		opacity: 0;

		z-index: 2;

	}



	5% {

		opacity: 1;

		z-index: 1;

	}



	20% {

		opacity: 1;

		z-index: 1;

	}



	25% {

		opacity: 0;

		z-index: 0;

	}



	100% {

		opacity: 0;

		z-index: 0;

	}

}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="content1"><img src="img/2022-4-21.jpg" /></div>
			<div class="content2"><img src="img/2022-2-18-1.jpg" /></div>
			<div class="content3"><img src="img/2022-3-15-1.jpg" /></div>
			<div class="content4"><img src="img/2022.11.8-0.jpg" /></div>
			<div class="content5"><img src="img/2022.11.8.jpg" /></div>
			<div class="focus-container">
				<ul class="floatfix">
					<li>
						<div class="focus-item focus-item1"></div>
					</li>
					<li>
						<div class="focus-item focus-item2"></div>
					</li>
					<li>
						<div class="focus-item focus-item3"></div>
					</li>
					<li>
						<div class="focus-item focus-item4"></div>
					</li>
					<li>
						<div class="focus-item focus-item5"></div>
					</li>
				</ul>

			</div>
		</div>

	</body>

</html>